<template>
    <el-container class="glass p-2">
        <el-header class="flex-wrap">
            <el-page-header @back="goBack">
                <template #content>
                    <span class="text-large font-600 mr-3">环球导航</span>
                    <el-text type="warning" class="fs-6 ms-3">一样的角色，不一样的眼界</el-text>
                </template>
            </el-page-header>
            <div class="position-absolute end-0 px-2" style="top:6px">
                <Clock />
                <ThemeSwitch />
            </div>
        </el-header>
        <el-container class="rounded p-2" style="height:calc(100vh - 44px)">
            <el-aside width="130px">
                <el-menu :default-active="activeIndex" @select="onChangeMenu" class="rounded">
                    <el-menu-item :index="item.category" v-for="(item, idx) of allData" :key="idx">
                        {{ item.category }}
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-scrollbar :always="true" :native="true" class="rounded">
                <el-main class="pt-0">
                    <el-card class="mb-3" v-for="(item, idx) of categoryData" :key="idx">
                        <template #header><strong>{{ item.text }}</strong></template>
                        <div class="flex flex-wrap">
                            <el-link class="me-4 mb-3" :href="item2.link" target="_blank" v-for="(item2, idx2) of item.data"
                                :key="idx2">
                                {{ item2.text }}
                            </el-link>
                        </div>
                    </el-card>
                </el-main>
            </el-scrollbar>
        </el-container>
    </el-container>
</template>

<script setup>
import Clock from '@/components/clock/Clock.vue';
import ThemeSwitch from '@/components/theme-switch/ThemeSwitch.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import allData from '@/mock/data/all';

const categoryData = ref(allData[0].data);

const activeIndex = ref(allData[0].category);

const onChangeMenu = (name) => {
    activeIndex.value = name;
    categoryData.value = allData.filter(v => v.category == name)[0].data;
}

const goBack = () => {
    router.push('/');
}
</script>

<style>
.el-menu-item {
    height: 40px;
}

.el-card__header {
    padding: 15px;
}

.el-card__body {
    padding: 15px;
    padding-bottom: 0;
}
</style>@/mock/all/_all@/mock/data/all